---
title: Guidelines
redirect_from:
  - /components/servicelogo/
---

import ShortNonvisualSnippet from "snippets/short-nonvisual.mdx";

<ReactExample exampleId="ServiceLogo-default" />

## When to use

- To add simple visual context so users can trust the well-known service (such as a payment method).

## When not to use

- For carriers for transport---use a [carrier logo](/components/visuals/carrierlogo/).
- For general visual context---use an [illustration](/components/visuals/illustration/).

## Component status

<ComponentStatus component="ServiceLogo" />

## Content structure

![Service logo: shows the logo, is available in grayscale, and is best when has the service name.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:175%3A0)

## Content

<ShortNonvisualSnippet version={2} visual="logo" associated="service" />
